<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            width: 200px;
            height: 200px;
            background-color: aquamarine;

            position: absolute;
            left: 50px;
            top: 50px;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</body>
<script>



    function Drag(ele) {
        // {}
        // {}[[Prototype]] = Drag.prototype;
        // this -> {}

        this.target = ele;

        // return this;
    }


    /* 
        // 给Drag.prototype新增属性
        Drag.prototype.posX = null;
        Drag.prototype.posY = null;
        Drag.prototype.init = function () { 
            this.start();
            this.randColor();
        }
        Drag.prototype.start = function(){
            
        }

        Drag.prototype.move = function(){
            
        }

        Drag.prototype.end = function(){
            
        }

        Drag.prototype.randColor = function(){
            
        }
    
    */

    Drag.prototype = {
        constructor: Drag,
        // 存储按下的位置
        posX: null,
        posY: null,
        init: function () {  // obj.init()
            this.start();
            this.randColor();
        },
        start: function () {// drag.start()
            // this -> drag对象
            var _this = this;  // 浅复制  _this引用drag对象的内存地址
            this.target.onmousedown = function (e) {
                // this -> 事件的this指向绑定事件的元素(box)
                e = e || window.event;
                _this.posX = e.offsetX;
                _this.posY = e.offsetY;
                console.log(_this);

                _this.move();  // 按下时绑定移动事件
                _this.end();  // 按下时绑定松开事件
            }
        },
        move: function () { // drag.move();
            // this -> drag对象
            document.onmousemove = (e) => {
                // this -> 事件的this指向绑定事件的元素(document)

                e = e || window.event;

                var x = e.pageX - this.posX;
                var y = e.pageY - this.posY;

                this.target.style.left = x + "px";
                this.target.style.top = y + "px";

            }
        },
        end: function () {
            document.onmouseup = function () {
                document.onmousemove = null;
            }
        },
        randColor() {
            var str = "0123456789abcdef";
            var colorStr = "#";
            for (var i = 0; i < 6; i++) {
                var index = Math.floor(Math.random() * str.length);
                var char = str.charAt(index);
                colorStr += char;
            }
            this.target.style.backgroundColor = colorStr;
        }

    }

    console.dir(Drag);

    var boxList = document.querySelectorAll(".box");

    for (var i = 0; i < boxList.length; i++) {
        var ele = boxList[i];
        var dragObj = new Drag(ele);
        console.log(dragObj);

        // dragObj.start();
        // dragObj.randColor();

        dragObj.init();

    }









</script>

</html>